<template>
  <div class="index-category">
    <div class="category" v-for="(list, index) in lists" :key="index">
      <i
        class="iconfont"
        :class="list.icon"
        :style="{ background: list.color }"
      ></i>
      <label>{{ list.title }}</label>
    </div>
  </div>
</template>

<script>
export default {
  name: "index-category",
  data() {
    return {
      lists: [
        { title: "美食", icon: "iconfenlei", color: "#fa69b9" },
        { title: "电影", icon: "iconfaxian1", color: "#ecbe35" },
        { title: "住宿", icon: "iconcompass", color: "#49dacf" },
        { title: "娱乐", icon: "iconcruise-ship", color: "#f60" },
        { title: "外卖", icon: "iconcruise-ship", color: "#908cfd" },
        { title: "打车", icon: "iconcruise-ship", color: "#92d85c" },
        { title: "景点", icon: "iconcruise-ship", color: "#f95730" },
        { title: "旅游", icon: "iconcruise-ship", color: "#908cfd" },
      ],
    };
  },
};
</script>

<style>
</style>